
//2.2.4创建my-menu.js，显示树形结构
//换掉 span里面的class
$(function () {
    //setting对象中包含zTree的设置属性
   initWholeTree();
})

//2.2.7阻止点击节点后跳转
// 使用了setting.data.key.url属性。


//2.2.6声明函数将图标修改为自定义图标
// 由setting.view.addDiyDom属性引用,负责显示自定义图标
//treeId是<ul id="treeDemo" class="ztree"><ul/>的id属性值
//treeNode对应每个树形节点
//原理:修改每个节点的class
function showMyIcon(treeId,treeNode){
    // console.log 输出普通信息  这个是输出treeId节点
    console.log(treeId);
    console.log(treeNode);
    //获取当前节点的id
    var currentNodeId=treeNode.tId;
    //获取新的class值用于替换
    var newClass=treeNode.icon;
    //在当前节点id之后附加"_ico"得到目标span的id
    var targetSpanId=currentNodeId+"_ico";
    $('#'+targetSpanId).removeClass().addClass(newClass).css("background","");
}


//3.2设计按钮组所在span的id
// 规则：treeDemo_序号_btnGrp
// 举例：treeDemo_20_btnGrp

//3.4声明函数生成按钮组
//生成并返回按钮组
function generateBtnGrp(treeNode) {
    // 获取当前节点的id（HTML中li标签的id）
    var tid=treeNode.tId;
    // 组装按钮组所在的span的id
    var btnGrpSpanId=tid+"_btnGrp";
    // 生成span标签对应的jQuery对象
    var $span = $("<span id='"+btnGrpSpanId+"'></span>");

    // 获取当前节点在数据库中的id值
    var menuId=treeNode.id;
    // 获取当前节点的level值
    var level=treeNode.level;

    // 声明三种按钮
    var addBtn = "<a onclick='showAddModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
    var editBtn = "<a onclick='showEditModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
    var removeBtn = "<a onclick='showConfirmModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";

    // 根据level进行判断
    if (level==0){
        $span.append(addBtn);
    }
    if(level == 1) {
        if(treeNode.children.length > 0) {
            $span.append(addBtn+" "+editBtn);
        }else{
            $span.append(addBtn+" "+editBtn+" "+removeBtn);
        }
    }
    if(level == 2) {
        $span.append(editBtn+" "+removeBtn);
    }

    return $span;
}

//3.5addHoverDom(treeId, treeNode)函数
////鼠标悬浮在节点上时调用此方法
function addHoverDom(treeId, treeNode){
     //在执行前加上判断 如果有按钮组的话 则不进行添加
    //组装按钮组所在的span标签的id
    var btnGrpSpanId=treeNode.tId+"_btnGrp";
    var btnGrpSpanIdLength=$("#"+btnGrpSpanId).length;
    if(btnGrpSpanIdLength>0){
        return;
    }
    //获取按钮组按钮
    var $btnGrpSpan=generateBtnGrp(treeNode);
    //由于按钮组按钮是放在当前节点中的超链接里面(a标签)后面.所以要先定位a标签
    //按id生成规则组装a标签的id
    var anchorId=treeNode.tId+"_a";
    //在a标签后面追加按钮组按钮
    $("#"+anchorId).append($btnGrpSpan);
}

//鼠标移出节点时调用此方法
function removeHoverDom(treeId, treeNode) {
    // 组装按钮组所在的span标签的id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";

    // 删除对应的元素
    $("#"+btnGrpSpanId).remove();
}

//4.2showAddModal()函数
// 添加菜单
function showAddModal(currentBtn) {
    //打开模态框
    $("#menuAddModal").modal("show");
    //将当前id存入 全局变量
    window.menuId=currentBtn.id;
}

//4.3给保存按钮绑定单击响应函数
//确定添加
$("#menuAddBtn").click(function () {
        //收集表单填写的数据
    var name=$.trim($("#menuAddModal [name='name']").val());
    var url = $.trim($("#menuAddModal [name='url']").val());
    var icon=$.trim($("#menuAddModal [name='icon']:checked").val());

    if(name == null || name == "") {
        layer.msg("请填写菜单项名称！");
        return ;
    }

    if(url == null || url == "") {
        layer.msg("请填写菜单项对应的访问地址！");
        return ;
    }

    //发送ajax请求增加
    $.ajax({
        "url": "/menu/save",
        "type": "post",
        "dataType": "json",
        "data":{
            "name":name,
            "url":url,
            "pid":window.menuId,
            "icon":icon
        },
        success:function (ajaxResult) {
            var result=ajaxResult.result;
            if(result=="SUCCESS"){
                layer.msg("操作成功!");
                initWholeTree();
            }else{
                layer.msg(response.message+"操作失败!");
            }
        }
    })


    //关闭模态框
    $("#menuAddModal").modal("hide");
});
function  initWholeTree() {
    var setting={
        "view":{
            //设置自定义图标
            "addDiyDom":showMyIcon,
            "addHoverDom": addHoverDom,
            "removeHoverDom": removeHoverDom
        },
        "data":{
            "key":{
                url:"notExistsProperty"//阻止节点点击后跳转
            }
        }
    };
    //发送ajax请求获取zNodes数据
    $.ajax({
        "url":"/menu/get/whole/tree",
        "type":"post",
        "dataType":"json",
        success:function (ajaxResult) {
            var result=ajaxResult.result;
            if(result=="SUCCESS"){
                //用于显示树形结构的节点数据
                var zNodes=ajaxResult.data;
                //执行树形结构的初始操作
                $.fn.zTree.init($("#treeDemo"),setting,zNodes);
            }else{
                layer.msg("加载菜单数据失败！原因是："+response.message);
            }
        }
    })
}


function showEditModal(obj) {
    //获取当前节点的id
    window.menuId=obj.id;
    $("#menuEditModal").modal('show');

    $.ajax({
        url:"/menu/select/"+window.menuId,
        type:"get",
        dataType:"json",
        success:function (ajaxResult) {
            if(ajaxResult.result=="SUCCESS"){
                var  menu=ajaxResult.data;


                var name=menu.name;
                var url=menu.url;
                var icon=menu.icon;

                //设置对应表的表单相
                $("#menuEditModal [name='name']").val(name);
                $("#menuEditModal [name='url']").val(url);
                $("#menuEditModal [name='icon'][value='"+icon+"']").attr("checked",true);
            }else{
                layer.msg("根据id查询失败!")
            }
        }
    })
}
$("#menuEditBtn").click(function () {
    //确定修改
 var name=$.trim($("#menuEditModal [name='name']").val());
    var url=$.trim($("#menuEditModal [name='url']").val());
    var icon=$.trim($("#menuEditModal [name='icon']:checked").val());
    if(name.length==0){
        return;
    }
    if(url.length==0){
        return;
    }

    //ajax修改

    $.ajax({
        url:"/menu/update",
        type:"post",
        data:{
             "id":window.menuId,
            "name":name,
            "url":url,
            "icon":icon
        },
        dataType:"json",
        success:function (ajaxResult) {
            if(ajaxResult.result=="SUCCESS"){
                layer.msg("修改成功");
                initWholeTree();
            }else{
                layer.msg("修改失败");
            }
        }
    })
//关闭 模态框
    $("#menuEditModal").modal('hide');

})


//删除
function showConfirmModal(currentBtn) {
    //获取当前id
    window.menuId=$(currentBtn).attr("id");
    var name=$(currentBtn).parent().prev().text();
    var r=confirm("确实要删除"+name+"这个标签吗!");
    if(r==false){
        return;
    }

    $.ajax({
        url:"/menu/delete/"+window.menuId,
        type:"get",
        dataType:"json",
        success:function (ajaxResult) {
            if(ajaxResult.result=="SUCCESS"){
                layer.msg("删除成功!")
                initWholeTree();
            }else{
                layer.msg("删除失败!");
            }
        }
    })
}










